/* ====================================== toast  ====================================== */
import React from 'react'
import { Checkbox } from 'antd'
// ===================================================================== Select
class Index extends React.Component {
	state = {
		
	}
	onChange = value => {
		const { onChange, onChanged, name, outer } = this.props
		
		if(!outer){ this.setState({ value }) }
		
		const model = name ? { [name]: value } : value
		onChanged?.({ model, value, name } )
		onChange?.(value)
	}
	
	setValue = value => this.setState({ value })
	clear = () => this.setValue([])
	
	render(){
		let  { size, disabled, data=[], value, idStr, nameStr, onChecked } = this.props
		let _value =  this.state.value === undefined ? value : this.state.value
		
		if((idStr || nameStr) && !onChecked){
			data.forEach(v=>{
				v.label = v[nameStr || 'name']
				v.value = v[idStr || 'value']
			})
		}else{
			idStr = idStr || 'value'
			nameStr = nameStr || 'name' 
		}
		const txt = window.$fn.formTest(data, nameStr || 'name' , idStr ||'value' )
		if(txt){
			data = [{ label:txt, value:0 }]
		}
		
		return (
			onChecked ? (
				<Checkbox.Group
					className 		= 'jzer-checkbox-group'
					size			= { size || 'small' } 
					onChange		= { this.onChange }
					value		 	= { _value }
					disabled		= { disabled }
				>
					{
						window.$fn.hasArray(data) && data.map((v,i) => <Checkbox key={i} onChange={e=>onChecked(e.target.value, e.target.checked)} value={v[idStr]}>{v[nameStr]}</Checkbox>)
					}
				</Checkbox.Group>
			) : (
				<Checkbox.Group
					className 		= 'jzer-checkbox-group'
					size			= { size || 'small' } 
					onChange		= { this.onChange }
					value		 	= { _value }
					disabled		= { disabled }
					options 		= { data }
				>
				</Checkbox.Group>
			)
		)
	}
}
export default Index